<template>
  <div v-if="recordData" class="container">
    <div class="progress">
      <div class="progress-stage">
        <div class="progress-status">
          <img src="@/assets/svg/quanxuan_selected.svg" alt="" />
        </div>
        <div class="progress-content">
          <div class="headline">
            <h3>发起审批</h3>
            <time>{{ recordData.report_date }}</time>
          </div>
          <div class="progress-info">
            <h4>{{ recordData.name }}</h4>
          </div>
        </div>
      </div>
      <div class="progress-stage">
        <div class="progress-status">
          <img
            v-if="!recordData.approver"
            src="@/assets/svg/jinxing.svg"
            alt=""
          />
          <img v-else src="@/assets/svg/quanxuan_selected.svg" alt="" />
        </div>
        <div class="progress-content">
          <div class="headline">
            <h3 v-if="recordData.approver">我已审批</h3>
            <h3 v-else>待审批</h3>
            <time>{{ recordData.approver_date }}</time>
          </div>
          <div v-if="recordData.notice" class="progress-info">
            <h4>{{ recordData.approver }}</h4>
            <p>审批意见：{{ recordData.notice }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { approvalProcess } from "@/api/ol.js";
export default {
  data() {
    return {
      id: "",
      recordData: "",
    };
  },

  mounted() {
    console.log(this.$route.query.id);
    this.id = this.$route.query.id;
    this.getData();
  },

  methods: {
    getData() {
      let that = this;
      approvalProcess({
        id: that.id,
      }).then((res) => {
        console.log(res.data);
        if (res.status == "success") {
          that.recordData = res.data;
        }
      });
    },
  },
};
</script>


<style lang="less">
.container {
  min-height: 100vh;
  background: #f7f9f9;
}
.progress {
  padding: 0 16px 20px 16px;
  box-sizing: border-box;
  .progress-stage {
    display: flex;
    flex-direction: row;
    padding-bottom: 20px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 18px;
      left: 7px;
      width: 1px;
      height: calc(100% - 14px);
      background: #009966;
    }
    &.fail {
      &::after {
        background: #fa4e3e;
      }
    }
    &:last-child {
      &::after {
        width: 0;
      }
    }
    .progress-status {
      padding-top: 4px;
      margin-right: 10px;
      position: relative;
      z-index: 10;
      img {
        width: 14px;
      }
    }
    .progress-content {
      flex-grow: 1;
      h3 {
        margin: 0;
        color: #313541;
        font-size: 15px;
        font-weight: 600;
      }
      time {
        color: #939dad;
        font-size: 12px;
        margin-top: 6px;
      }
      .progress-info {
        margin-top: 16px;
        background: #ffffff;
        border-radius: 10px;
        padding: 0 16px;
        box-sizing: border-box;
        h4 {
          margin: 0;
          color: #313541;
          font-size: 17px;
          border-width: 600;
          padding: 16px 0;
          border-bottom: 1px solid #f2f2f2;
          span {
            font-size: 13px;
            font-weight: normal;
          }
        }
        p {
          margin: 0;
          padding: 16px 0;
          color: #313541;
          font-size: 13px;
          line-height: 1.5;
        }
      }
    }
  }
}
</style>